import React from 'react'
import { connect } from 'react-redux'

import { RecommedWrapper } from '../style'

class Recommend extends React.PureComponent {
  render() {
    const { list } = this.props
    return (
      <RecommedWrapper>
        {list.map(item => (
          <a href="" key={item.get('id')}>
            <img src="//cdn2.jianshu.io/assets/web/banner-s-3-7123fd94750759acf7eca05b871e9d17.png" alt="" />
          </a>
        ))}
        <a className='index-aside-download-qrbox' href=''>
          <img className='qrcode' src="//cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png" alt=""/>
          <div className="info">
            <div className="title">下载简书手机App</div>
            <div className="description">随时随地发现和创作内容</div>
          </div>
          <div className="bigQR">
          <img src="//cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png" alt=""/>
          </div>
        </a>
      </RecommedWrapper>
    )
  }
}

const mapState = (state) => {
  return {
    list: state.getIn(['home', 'recommendList'])
  }
}

export default connect(
  mapState
)(Recommend)
